<template>
    <div class="page">
        <div class="wrapper" v-if="isShow">
            <div class="top-nav">
                <i class="el-icon-arrow-left"  @click="changeShow"></i>
                <div class="song-info">
                    <div class="song-name">{{songName}}</div>
                    <div class="singer"></div>
                </div>
                <div class="search"><i class="el-icon-search"></i></div>
            </div>
            <div class="song-avatar"><img :src="songCover" alt=""></div>
            <Lyric v-if="isShow"></Lyric>
        </div>
        <div class="audio"
         @click="changeShow">
            <!-- <div class="favor"></div> -->
            <audio ref="player" 
            :src="songUrl ? songUrl : ''"
            controls
            autoplay
            loop
            @timeupdate="onTimeUpdate()"></audio>
            <!-- <div class="download"></div> -->
        </div>
    </div>
</template>

<script>
import {mapState,mapMutations,mapAction } from 'vuex'
import Lyric from './Lyric.vue'
export default {   
    name:'player',
    components: { Lyric },
    data() {
        return {
            playerData:null,
            lyric:null,
            allKeys:[],
            isShow:false,
        }
    },
    computed: {
        ...mapState(['songUrl','songCover','songLriycs','songName'])
    },
    methods: {
        changeShow() {
            this.isShow = !this.isShow
        },
        onTimeUpdate() {
            this.$store.state.currentTime = this.$refs.player.currentTime;
        },
    },
    created() {
        if(this.$route.params.id) {
            this.$api.getPlayer({
                id:this.$route.params.id,
            }).then(res => {
                this.playerData = res.data[0];
                // console.log(this.playerData)
            });
        };
    },
    
    updated() {
        console.log(this.$refs.player)
        console.log(this.isShow)
    }
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrapper {
    height: 850px;
    display: flex;
    flex-direction: column;
    .top-nav {
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        height: 6%;
        // position: fixed;
        // top: 0;
        i {
        color: #000;
        font-size: 2rem;
        }
    }
    img {
        width: 100.5%;
    }
}
    .audio {
        width: 100%;
        height: 60px;
        background-color: #f1f1f1;
        position: fixed;
        bottom: 5vh;
        display: flex;
        align-content: center;
        justify-content: center;
    }

</style>